import { FilterSpecification } from 'mapbox-gl';
import { EngiGis } from '..';

import { IconLayer } from '../map/layers/IconLayer';
import { IBizUnitConfig, ModelObjType } from '../shared/types';
import logger from 'loglevel';
import { ModelBizUnit } from './modelBizUnit';
import { IBaseLayer } from '../map/layers';

export class SubstationBizUnit extends ModelBizUnit {
  override sizeScale = 0.5;
  objType: ModelObjType = 'substation'; // 业务单元类型
  unitType: string = this.objType;

  constructor(engiGis: EngiGis) {
    super(engiGis);
  }

  filter(conditions: FilterSpecification) {
    this.layers.forEach((layer) => {
      layer.filter(conditions);
    });
  }

  async setRenderer(config: IBizUnitConfig): Promise<IBaseLayer[]> {
    logger.info('开始绘制热力站图层');
    const engiGis = this.engiGis;
    const icons = {
      relizhan: 'public/icons/relizhan.png',
    };
    await engiGis.mapCore.loadImages(icons);
    const iconLayer = new IconLayer(
      {
        layerId: this.layerId,
        sourceId: this.sourceId,
        map: this.map,
        sort: config.sort || 0,
      },
      {
        layout: {
          ...this.getLayoutBase(),
          'icon-image': 'relizhan',
          'symbol-sort-key': config.sort || 0,
          'icon-allow-overlap': true,
          'icon-ignore-placement': true,
        },
      },
    );

    // const circleLayer = new BaseLayer({
    //   layerId: `${this.layerId}-circle`,
    //   sourceId: this.sourceId,
    //   map: this.map,
    //   sort: config.sort || 0
    // }, () => {
    //   this.map.addLayer({
    //     id: `${this.layerId}-circle`,
    //     type: 'circle',
    //     source: this.sourceId,
    //     paint: {
    //       'circle-radius': 5,
    //       'circle-color': '#007cbf',
    //       'circle-opacity': 0.5
    //     }
    //   });
    //   return `${this.layerId}-circle`;
    // })
    // 聚合图层
    // const ClusterSourceId = `${this.sourceId}-cluster`;

    // const clusterCircleLayer = new BaseLayer({
    //   layerId: `${this.layerId}-cluster-circle`,
    //   sourceId: this.sourceId,
    //   map: this.map,
    //   sort: config.sort || 0
    // }, () => {
    //   this.map.addLayer({
    //     id: `${this.layerId}-cluster-circle`,
    //     type: 'circle',
    //     source: ClusterSourceId,
    //     filter: ['has', 'point_count'],
    //     paint: {
    //       'circle-radius': [
    //         'step',
    //         ['get', 'point_count'],
    //         20, // 初始半径
    //         10,  // 当点数大于10时，半径增加到30
    //         30,
    //         50,  // 当点数大于50时，半径增加到40
    //         40,
    //         100, // 当点数大于100时，半径增加到50
    //         50
    //       ],
    //       'circle-color': '#007cbf',
    //       'circle-opacity': 0.5
    //     }
    //   });
    //   return `${this.layerId}-cluster-circle`;
    // })

    // const clusters = this.map.addLayer({
    //   id: 'clusters',
    //   type: 'circle',
    //   source: this.sourceId,
    //   filter: ['has', 'point_count'],
    //   paint: {
    //     // Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
    //     // with three steps to implement three types of circles:
    //     //   * Blue, 20px circles when point count is less than 100
    //     //   * Yellow, 30px circles when point count is between 100 and 750
    //     //   * Pink, 40px circles when point count is greater than or equal to 750
    //     'circle-color': [
    //       'step',
    //       ['get', 'point_count'],
    //       '#51bbd6',
    //       100,
    //       '#f1f075',
    //       750,
    //       '#f28cb1'
    //     ],
    //     'circle-radius': [
    //       'step',
    //       ['get', 'point_count'],
    //       20,
    //       100,
    //       30,
    //       750,
    //       40
    //     ],
    //     'circle-emissive-strength': 1
    //   },
    //   layout: {
    //     "text-font": ["Open Sans Regular"],
    //   }
    // });

    // const clusterCount = this.map.addLayer({
    //   id: 'cluster-count',
    //   type: 'symbol',
    //   source: this.sourceId,
    //   filter: ['has', 'point_count'],
    //   layout: {
    //     'text-field': ['get', 'point_count_abbreviated'],
    //     'text-size': [
    //       'step',
    //       ['get', 'point_count'],
    //       0, // 初始字体大小
    //       10,  // 当点数大于10时，字体大小增加到14
    //       12,
    //       100,  // 当点数大于750时，字体大小增加到16
    //       14
    //     ],
    //     "text-font": ["Open Sans Regular"],
    //   },

    // });

    // console.log('clusters', clusterCount, clusters);
    this.layers.push(iconLayer);
    return [iconLayer];
  }

  zoomChangeHandler(zoom: number): void {
    const circleLayerId = `${this.layerId}-circle`;
    const circleLayer = this.layers.find(
      (layer) => layer.layerId === circleLayerId,
    );
    const clusterCircleLayer = this.layers.find(
      (layer) => layer.layerId === `${this.layerId}-cluster-circle`,
    );
    console.log();
    if (zoom > 13) {
      console.log('zoom level is greater than 13, hide layer');
      circleLayer?.hide();
    } else if (zoom <= 12) {
      console.log('zoom level is less than or equal to 13, show layer');
      circleLayer?.show();
    } else {
      clusterCircleLayer?.show();
    }
  }
}
